<template>
  <!-- 头部选项 -->
  <header-option>
    <template v-slot:btn>
      <div>
        <cs-btn
          btnText="7天内"
          :type="currentSelectDay === 7 ? 'primary' : 'default'"
          class="select7DayBtn"
          @click.native="dayBtnClick_7"
        />
        <cs-btn
          btnText="30天内"
          :type="currentSelectDay === 30 ? 'primary' : 'default'"
          class="select30DayBtn"
          @click.native="dayBtnClick_30"
        />
        <cs-btn
          v-if="innerMenu.add.flag"
          type="primary"
          btnText="添加"
          @click.native="addBtnClick"
        />
        <cs-btn v-if="innerMenu.del.flag" btnText="删除" @click.native="deleteBtnClick" />
        <cs-btn v-if="innerMenu.exp.flag" btnText="导出" @click.native="exportlist" />
      </div>
    </template>
    <template v-slot:input>
      <cs-label labelText="企业名称" class="name">
        <el-input class="cs-input" v-model.trim="enterpriseName" clearable></el-input>
      </cs-label>
      <cs-btn type="search" btnText="查询" class="searcg_btn" @click.native="searchBtnClick" />
    </template>
  </header-option>
</template>

<script>
import _ from 'lodash'

import headerOption from '@/components/headerOption/headerOption.vue'
import csBtn from '@/components/cs-btn/cs-btn.vue'
import csLabel from '@/components/cs-label/cs-label.vue'

export default {
  components: {
    headerOption,
    csBtn,
    csLabel
  },
  props: {
    innerMenu: {
      require: true,
      type: Object
    }
  },
  data() {
    return {
      enterpriseName: '',
      currentSelectDay: 7
    }
  },
  created() {
    this.$bus.$on('currentSelect_Enterprise', (selectNum) => {
      this.currentSelect = selectNum
    })
  },
  beforeDestroy() {
    // this.$bus.$off('exportlist')
    this.$bus.$off('addBtnClick')
    this.$bus.$off('searchentErpriseData')
    this.$bus.$off('deleteEnterpriseBtnClick')
    this.$bus.$off('dayBtnClick_7')
    this.$bus.$off('dayBtnClick_30')
  },
  methods: {
    dayBtnClick_7() {
      if (this.currentSelectDay === 7) return
      this.currentSelectDay = 7
      this.$bus.$emit('dayBtnClick_7')
    },
    dayBtnClick_30() {
      if (this.currentSelectDay === 30) return
      this.currentSelectDay = 30
      this.$bus.$emit('dayBtnClick_30')
    },
    exportlist() {
      this.$bus.$emit('exportlistcompany', this.enterpriseName)
    },
    addBtnClick() {
      this.$bus.$emit('addBtnClick')
    },
    searchBtnClick: _.throttle(function () {
      this.$bus.$emit('searchentErpriseData', this.enterpriseName)
    }, 1000),
    deleteBtnClick() {
      if (this.currentSelect === 0) {
        this.$message({
          message: '请选择需要删除的企业',
          type: 'warning'
        })
      } else {
        this.$bus.$emit('deleteEnterpriseBtnClick')
      }
    },
    async getExportlist(info) {
      const { data } = await exportlist(info)
      const filename = '企业信息表.xlsx'
      const blob = new Blob([data], { type: 'application/vnd.ms-excel' })
      if (typeof window.navigator.msSaveBlob !== 'undefined') {
        // 兼容IE，window.navigator.msSaveBlob：以本地方式保存文件
        window.navigator.msSaveBlob(blob, decodeURI(filename))
      } else {
        // 创建新的URL并指向File对象或者Blob对象的地址
        const blobURL = window.URL.createObjectURL(blob)
        // 创建a标签，用于跳转至下载链接
        const tempLink = document.createElement('a')
        tempLink.style.display = 'none'
        tempLink.href = blobURL
        tempLink.setAttribute('download', decodeURI(filename))
        // 兼容：某些浏览器不支持HTML5的download属性
        if (typeof tempLink.download === 'undefined') {
          tempLink.setAttribute('target', '_blank')
        }
        // 挂载a标签
        document.body.appendChild(tempLink)
        tempLink.click()
        document.body.removeChild(tempLink)
        // 释放blob URL地址
        window.URL.revokeObjectURL(blobURL)
      }
    }
  },
  watch: {
    enterpriseName(newValue, oldValue) {
      // 如果输入框没有数据，就搜索全部企业数据
      if (newValue === '') {
        this.$bus.$emit('searchentErpriseData', newValue)
      }
    }
  }
}
</script>

<style scoped>
/* 头部样式start */
.cs-input >>> .el-input__inner {
  width: 276px !important;
  height: 32px !important;
  border-radius: 0 !important;
}

.el-input >>> .el-input__icon {
  line-height: 32px;
}

.cs-btn:first-child {
  /* border-left: 1px solid #dddddd; */
}

.cs-btn:nth-child(3) {
  margin-right: 28px;
  /* border-left: 1px solid #006eff; */
}

.searcg_btn {
  margin-right: 30px;
  /* border-left: 1px solid #006eff !important; */
}

.select7DayBtn {
  margin-right: 0;
  /* border-right: none; */
}

.select30DayBtn {
  margin-right: 35px;
}

/* 头部样式end */
</style>
